<template>
  <div style="margin-top: 10px; width: 50%; margin: 10px auto; background-color: white; text-align: center">
    <table style="margin: 20px auto">
      <tr>
        <th>订单号</th>
        <td>{{ orderNo }}</td>
      </tr>
      <tr>
        <th>金额</th>
        <td>{{ money }} 元</td>
      </tr>
    </table>
    <hr style="width: 280px" />
    <div>
      <span>支付方式：</span>
    </div>
    <img src="../../../resource/img/微信支付.png" style="width: 90px; height: 90px; margin-right: 30px" @click="pay">
    <img src="../../../resource/img/支付宝.png" style="width: 100px; height: 100px" @click="pay">
    <el-button style="margin-top: 20px" @click="pay">付款</el-button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Pay",
  data() {
    return {
      consumerId: "123456",
      storeId: 1,
      addressId: 2,
      goodsId: 1,
      skuId: 1,
      goodsNum: 1,
      payStatus: 1,
    };
  },
  created() {
    this.money = parseFloat(this.$route.query.price).toFixed(2);
    this.orderNo = this.$route.query.orderNo;
    this.goodsId = parseInt(this.$route.query.goodsId);
    this.price = parseFloat(this.$route.query.price).toFixed(2);
    this.quantity = parseInt(this.$route.query.quantity);
  },

  methods: {
    async pay() {
      try {

        const params = new URLSearchParams({
          consumerId: "123456",
          storeId: 1,
          addressId: 2,
          goodsId: 1,
          skuId: 1,
          goodsNum: 1,
          payStatus: 1,
        });
        const res = await axios.get('http://localhost:8089/consumer/addOrder?' + params.toString());
        if (res.data.code === 200) {
          alert("您成功支付" + this.money + "元");
          this.$router.replace("/orderlist");
          window.location.href = "http://localhost:8080/#/topview";
        } else {
          this.$message.error(res.msg);
        }
      } catch (error) {
        console.error(error);
        this.$message.error("请求出错，请重试");
      }
    },
  },
};
</script>

<style scoped>
tr {
  line-height: 40px;
}
</style>